<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
		<meta name="format-detection" content="telephone=no">
		<link rel="shortcut icon" type="image/x-icon" href="./data/favicon.ico">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<div id="root" class="container">
			<div class="artical-action">
				<div class="artical-action-mid" id="action_mid"></div>
			</div>
			<div id="top-nav" class="top-nav" style="display: none;">
				<div class="icon-back"></div>
				<div class="nav-title">返回书架</div>
			</div>
			<div id="fiction_chapter_title"></div>
			<div id="fiction_container" class="m-read-content">
				<!--<h4>写轮眼</h4>
				<p>
					“嗯？头怎么昏昏的？我这是在哪里？”郑玉恒醒来之后，晃了晃头，想要驱散那昏沉沉的感觉，不过事与愿违，不晃不要紧，一晃之下再次倒下了。
					再次昏迷过去之后，他好像做了一个梦，在梦中他的名字叫做宇智波佐助，出生在宇智波家族，父亲是宇智波一族的族长，母亲负责家务，还有一
					名天才的哥哥，自己总是缠着哥哥一起修炼，希望他教导自己苦无的投掷方法。幸福的生活终结了，哥哥突然不知道为什么？独自一人杀死了全部
					的族人，最后在面对自己的时候，眼中充满了不屑，随后使用了幻术攻击，好像哥哥最后嘴里吐出了两个字：“月读。”这是火影吗？我怎么会梦到
					火影忍者里的情节？我不是应该死去了吗？
				</p>
				<p>
					郑玉恒本来是个大学刚刚毕业的青年，对于火影忍者这部动漫也是一直追着看的，好不容易看到了结局，不过说实话，日本动漫虽然好看，但是太墨
					迹了，如果连续追逐几部长篇动漫的话，那么你的一生估计也就过去了，尤其是在你上了年纪之后千万别再追看了，弄不好就是你挂了，动漫没出完。
					刚刚毕业的郑玉恒找到了一份很不错的工作，在一家酒楼当会计，没错郑玉恒学的就是会计专业，因为他的家里就是经营烧烤店的，上高中以后，每
					天放学他都会在店里帮忙算账，练就了不错的速算本事，所以他干脆就学会计了。毕业以后他想留在大城市里，毕竟他的家乡只能算是二线城市，所
					以他先跑到这家酒楼来学习，一边工作一边观察大城市的酒楼是如何经营的，方便以后自己创业。悲剧就在这里发生了，刚到酒楼的郑玉恒为了表现
					工作的积极性，工作第一天就在酒楼里加班，争取用最快的速度理清酒楼的账目，没想到晚上就遇到了贼。在办公室里算账的郑玉恒听到了楼下的声
					音，于是他跑下来打算看看，没想到对方直接上来就捅了了十几刀，那个疼啊。不过痛疼来的快，去的也快，因为他挂了，到现在为止他还不知道那
					个人长什么样子？他来饭店干什么？为什么上来就给自己几刀呢？带着一堆的疑问，郑玉恒与世长辞了，还好家里还有个弟弟，毕竟是做生意的人家，
					计划生育的罚款并不在意。再次清醒了过来，郑玉恒再次观察了一下周围，这里是病房，而且是单人病房，病床的左边是一扇白布制成的屏风，好像
					挡住了房门，右边有一个不大的床头柜子，郑玉恒起身下地，看到了墙上的镜子，走过去想看看现在自己的模样，可是怎么都看不到，因为他的身体
					变小了。再次醒来的时候他就完全的清醒了，感觉自己的身体变小了，而且身上也没有疼痛的感觉，不像被捅了十几刀的人。镜子有点儿高，郑玉恒
					看了看四周，病床下面有一个小凳子，他直接拉出来放到镜子下面，然后自己踩上去，终于可以照到镜子了，不过一看之下他愣住了。镜子中的人他
					实在是太熟悉了，而且曾经是他经常吐槽的对像宇智波佐助，少年版的宇智波佐助，黑色的头发，大眼睛，表情不是冷酷而是惊讶，同时一双一勾玉
					的写轮眼镶嵌在脸上。不对啊，为什么会开眼了呢？动漫上这个时候没有开眼啊，为什么会这个样子。郑玉恒惊讶之后平静了下来，这得益于海量的
					穿越小说的洗礼，谁不想穿越啊？看过这些小说之后每个人都有一个穿越的梦想，自己也有过，尤其是自己最喜欢的火影忍者了，为此他还准备过。
				</p>
				<p>
					“嗯？头怎么昏昏的？我这是在哪里？”郑玉恒醒来之后，晃了晃头，想要驱散那昏沉沉的感觉，不过事与愿违，不晃不要紧，一晃之下再次倒下了。
					再次昏迷过去之后，他好像做了一个梦，在梦中他的名字叫做宇智波佐助，出生在宇智波家族，父亲是宇智波一族的族长，母亲负责家务，还有一
					名天才的哥哥，自己总是缠着哥哥一起修炼，希望他教导自己苦无的投掷方法。幸福的生活终结了，哥哥突然不知道为什么？独自一人杀死了全部
					的族人，最后在面对自己的时候，眼中充满了不屑，随后使用了幻术攻击，好像哥哥最后嘴里吐出了两个字：“月读。”这是火影吗？我怎么会梦到
					火影忍者里的情节？我不是应该死去了吗？
				</p>
				<p>
					“嗯？头怎么昏昏的？我这是在哪里？”郑玉恒醒来之后，晃了晃头，想要驱散那昏沉沉的感觉，不过事与愿违，不晃不要紧，一晃之下再次倒下了。
					再次昏迷过去之后，他好像做了一个梦，在梦中他的名字叫做宇智波佐助，出生在宇智波家族，父亲是宇智波一族的族长，母亲负责家务，还有一
					名天才的哥哥，自己总是缠着哥哥一起修炼，希望他教导自己苦无的投掷方法。幸福的生活终结了，哥哥突然不知道为什么？独自一人杀死了全部
					的族人，最后在面对自己的时候，眼中充满了不屑，随后使用了幻术攻击，好像哥哥最后嘴里吐出了两个字：“月读。”这是火影吗？我怎么会梦到
					火影忍者里的情节？我不是应该死去了吗？
				</p>
				<p>
					“嗯？头怎么昏昏的？我这是在哪里？”郑玉恒醒来之后，晃了晃头，想要驱散那昏沉沉的感觉，不过事与愿违，不晃不要紧，一晃之下再次倒下了。
					再次昏迷过去之后，他好像做了一个梦，在梦中他的名字叫做宇智波佐助，出生在宇智波家族，父亲是宇智波一族的族长，母亲负责家务，还有一
					名天才的哥哥，自己总是缠着哥哥一起修炼，希望他教导自己苦无的投掷方法。幸福的生活终结了，哥哥突然不知道为什么？独自一人杀死了全部
					的族人，最后在面对自己的时候，眼中充满了不屑，随后使用了幻术攻击，好像哥哥最后嘴里吐出了两个字：“月读。”这是火影吗？我怎么会梦到
					火影忍者里的情节？我不是应该死去了吗？
				</p>
				<p>
					“嗯？头怎么昏昏的？我这是在哪里？”郑玉恒醒来之后，晃了晃头，想要驱散那昏沉沉的感觉，不过事与愿违，不晃不要紧，一晃之下再次倒下了。
					再次昏迷过去之后，他好像做了一个梦，在梦中他的名字叫做宇智波佐助，出生在宇智波家族，父亲是宇智波一族的族长，母亲负责家务，还有一
					名天才的哥哥，自己总是缠着哥哥一起修炼，希望他教导自己苦无的投掷方法。幸福的生活终结了，哥哥突然不知道为什么？独自一人杀死了全部
					的族人，最后在面对自己的时候，眼中充满了不屑，随后使用了幻术攻击，好像哥哥最后嘴里吐出了两个字：“月读。”这是火影吗？我怎么会梦到
					火影忍者里的情节？我不是应该死去了吗？
				</p>-->
			</div>
			<div class="m-button-bar">
				<ul class="u-tab">
					<li id="prev_button">上一章</li>
					<li id="next_button">下一章</li>
				</ul>
			</div>
			<div class="nav-pannel-bk font-container" style="display: none;"></div>
			<div class="nav-pannel font-container" id="font-container" style="display: none;">
				<div class="child-mod">
					<span>字号</span>
					<button id="large-font" class="font-size-button">大</button>
					<button id="small-font" class="font-size-button">小</button>
				</div>
				<div class="child-mod">
					<span>背景</span>
					<div class="bk-container bk_fff bk_container">
						<div class="bk-container-current"></div>
					</div>
					<div class="bk-container bk_E9DFC7 bk_container">
						<div class="bk-container-current"></div>
					</div>
					<div class="bk-container bk_D5D5D6 bk_container">
						<div class="bk-container-current"></div>
					</div>
				</div>
			</div>
			<div id="footer-nav" class="footer-nav" style="display: none;">
				<div id="catalog" class="catalog">
					<div class="icon-catalog"></div>
					<div class="tips">目录</div>
				</div>
				<div id="typeface" class="typeface">
					<div id="icon-typeface" class="icon-typeface"></div>
					<div class="tips">字体</div>
				</div>
				<div id="night" class="night">
					<div id="icon-date-night" class="icon-night"></div>
					<div class="tips">夜间</div>
				</div>
			</div>
		</div>
		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script src="js/jquery.base64.js"></script>
		<script src="js/jquery.jsonp.js"></script>

		<script>
			(function() {
				'use strict';
				var Util = (function(){
					var prefix = 'html5_reader_';
					var StorageGetter = function(key) {
						return localStorage.getItem((prefix + key));
					}
					var StorageSetter = function(key,val){
						return localStorage.setItem(prefix + key,val);
					}
					var getBSJSONP = function(url,callback){
						return $.jsonp({//jsonp插件的方法
							url : url,
							cache : true,//是否可以缓存
							callback:'duokan_fiction_chapter',//把数据已js的方式请求回来，外层包裹一个方法callback指向那个方法
							success: function(result){
//								debugger
								var data = $.base64.decode(result);
								var json = decodeURIComponent(escape(data));
								callback(json);
							}
						})
					}
					return {
						getBSJSONP:getBSJSONP,
						StorageGetter:StorageGetter,
						StorageSetter:StorageSetter
					}
				})();
				var Dom = {
					top_nav: $("#top-nav"),
					footer_nav: $("#footer-nav"),
					night_day_switch_button: $('#night'),
					font_container: $('.font-container'),
					font_button: $('#icon-typeface')
				}
				var Win = $(window);
				var Doc = $(document);
				var readerModel;
				var readerUI;
				var RootContainer = $('#fiction_container')
				var initFontSize = Util.StorageGetter("font-size");
				initFontSize = parseInt(initFontSize);
				if(!initFontSize){
					initFontSize = 14;
				}
				var initBackground = Util.StorageGetter("background");
				if(!initBackground){
					initBackground = "#E9DFC7";
				}
				RootContainer.css('background',initBackground);
//				var initFontSize ;
//				!initFontSize ? initFontSize=14:initFontSize=parseInt(Util.StorageGetter('font-size'));
				RootContainer.css('font-size',initFontSize);
				function main(){
					//todo 整个项目的入口函数
					readerModel = ReaderModel();
					readerUI = ReaderBaseFrame(RootContainer);
					readerModel.init(function(data){
						readerUI(data)
					});
					EventHanlder();
				}
				function ReaderModel() {
					//todo 实现和阅读器相关的数据交互方法
					var Chapter_id;
					var Chapter_len;
					var init = function(UIcallback){
						/*改用Promise方法*/
//						getFictionInfo(function(data){
//							getCurChapterContent(Chapter_id,function(data){
//								UIcallback && UIcallback(data);
//							})
//						})
						/*一个promise对象执行完以后用then方法执行另一个promise对象直到最后执行的不再是一个promise对象以后停止
						 */
						getFictionInfoPromiser().then(function(d){
							return getCurChapterContentPromise();
						}).then(function(data){
							UIcallback && UIcallback(data);
						});
					}
					/*Promise实现异步*/
//					Promise对象不是立刻创建，应该是在调用的时候创建var getFictionInfoPromiser = new Promise(function(resolve,reject){
					var getFictionInfoPromiser = function(){
						return new Promise(function(resolve,reject){
							$.get('./data/chapter.json',function(data) {
									//todo 获得章节信息的回调
									if(data.result == 0){
										Chapter_id = Util.StorageGetter('last_chapter_id');
										if(Chapter_id === null){
											Chapter_id = data.chapters[1].chapter_id;
										}
										Chapter_len = data.chapters.length;
										resolve();
									} else {
										reject();
									}
								},'json');
							});
						}	
					/*回调实现异步*/
					var getFictionInfo = function(callback) {
						$.get('./data/chapter.json',function(data) {
							//todo 获得章节信息的回调
							Chapter_id = Util.StorageGetter('last_chapter_id');
							if(Chapter_id === null){
								Chapter_id = data.chapters[1].chapter_id;
							}
							Chapter_len = data.chapters.length;
							callback && callback(data);
						},'json');
					}
					/*Promise实现异步*/
					var getCurChapterContentPromise = function(){
						return new Promise(function(resolve,reject){
							$.get('./data/data'+ parseInt(Chapter_id) + '.json',function(data){
								//todo 获取章节详细内容的回调
								if(data.result === 0) {
									var url = data.jsonp;
									Util.getBSJSONP(url , function(data){
	//									callback && callback(data);
										resolve(data);
									})
								} else {
									reject({msg:'fail'});
								}
							},'json')
						});
					} 
					/*回调实现异步*/
					var getCurChapterContent = function(chapter_id, callback) {
						$.get('./data/data'+ parseInt(chapter_id) + '.json',function(data){
							//todo 获取章节详细内容的回调
							if(data.result === 0) {
								var url = data.jsonp;
								Util.getBSJSONP(url , function(data){
									console.log(JSON.parse(data));
									callback && callback(data);
								})
							}
						},'json')
					}
					var prevChapter = function(UIcallback){
						Chapter_id = parseInt(Chapter_id,10);
						if(Chapter_id == 0){
							return
						}
						Chapter_id -= 1;
						getCurChapterContent(Chapter_id,UIcallback);
//						$("body").scrollTo({toT: 0});
						Util.StorageSetter('last_chapter_id',Chapter_id);
					}
					var nextChapter = function(UIcallback){
						Chapter_id = parseInt(Chapter_id,10);
						if(Chapter_id == Chapter_len){
							return
						}
						Chapter_id += 1;
						getCurChapterContent(Chapter_id,UIcallback);
						Util.StorageSetter('last_chapter_id',Chapter_id);
					}
					return {
						init:init,
						prevChapter:prevChapter,
						nextChapter:nextChapter
					}
				}
				function ReaderBaseFrame(container){
					//todo 渲染基本的UI结构
					function parseChapterData(jsonData){
						var jsonObj = JSON.parse(jsonData);
						var html = '<h4>' +jsonObj.t +'</h4>';
						for(var i=0;i<jsonObj.p.length;i++){
							html += '<p>' + jsonObj.p[i] + '<p>';
						}
						return html;
					}
					return function(data){
						container.html(parseChapterData(data));
					};
				}
				function EventHanlder(){
					//todo 交互的事件绑定
					//touch
					//zeqto tap只能用在移动端，PC端就不能使用
					//4.0以前 click 300ms延迟
					$('#action_mid').click(function() {
						if(Dom.top_nav.css('display')=='none'){
							Dom.top_nav.show();
							Dom.footer_nav.show();
						} else {
							Dom.top_nav.hide();
							Dom.footer_nav.hide();
							Dom.font_container.hide();
							Dom.font_button.addClass('icon-typeface').removeClass('icon-typeface-hover');
						}
					});
					$('#typeface').click(function() {
						if(Dom.font_container.css('display')=='none') {
							Dom.font_container.show();
							Dom.font_button.addClass('icon-typeface-hover').removeClass('icon-typeface');
						}else {
							Dom.font_container.hide();
							Dom.font_button.addClass('icon-typeface').removeClass('icon-typeface-hover');
						}
					})
					Dom.night_day_switch_button.click(function(){
						//触发背景切换的事件
					});
					$('.bk_container').click(function(){
						var _this = $(this);
						console.log(_this);
						initBackground = _this.css('background');
						RootContainer.css('background',initBackground);
						Util.StorageSetter('background',initBackground);
					})
					$('#large-font').click(function(){
						if(initFontSize > 20) {
							return;
						}
						initFontSize += 1;
						RootContainer.css('font-size',initFontSize);
						Util.StorageSetter('font-size',initFontSize);
					})
					$('#small-font').click(function(){
						if(initFontSize < 12) {
							return;
						}
						initFontSize -= 1;
						RootContainer.css('font-size',initFontSize);
						Util.StorageSetter('font-size',initFontSize);
					})
					Win.scroll(function(){
						Dom.top_nav.hide();
						Dom.footer_nav.hide();
						Dom.font_container.hide();
						$('#icon-typeface').addClass('icon-typeface').removeClass('icon-typeface-hover');
					});
					$("#prev_button").click(function(){
						//todo获取章节翻页数据渲染
						readerModel.prevChapter(function(data){
							readerUI(data);
							$("body").scrollTop(0);
						});
					});
					$('#next_button').click(function(){
						//todo获取章节翻页数据渲染
						readerModel.nextChapter(function(data){
							readerUI(data);
							$("body").scrollTop(0);
						});
					});
				}
				main();
			})();
		</script>
	</body>
</html>